<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>仓储物流</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <style>
        .van-field__body textarea {
            width: 3.51rem;
            height: 1.36rem !important;
            /* border: .01rem solid #EBEBEB; */
            border-radius: .05rem;
            padding: 0 .08rem;
        }

        html,
        body {
            background-color: #fff;
        }

        .app {
            background-color: #f7f7f7;
        }

        .bgf {
            margin-bottom: 1rem;
        }
        .swiper-slide{
            width: 3.5rem;
            height: 2.64rem;
            margin: 0;
            padding: 0;
        }
        .swiper-slide img,.swiper-slide video{
            width: 3.5rem;
            height: 2.64rem;
            border-radius: 0.05rem;
            background: #000;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="bgf">
            <table></table>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide flex-x-c" v-for="(item,index) in objDetail.banners" :key="index">
                        <img v-lazy="item.imageUrl ? item.imageUrl  : 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/default/loading3.png'" alt="" v-if="!item.playURL" @click="preview(index,objDetail.banners)">
                        <div class="videoPlay main-img" v-else>
                            <video  :id="'player'+index" controls preload="none"
                                webkit-playsinline="true" playsinline="true" :poster="item.imageUrl ? item.imageUrl  : 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/default/loading3.png'" x5-playsinline>
                                <source :src="item.playURL" type="video/mp4" />
                            </video>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="ccwl-detail">
                <div class="title">{{objDetail.title}}</div>
                <div class="money" v-if="type == 1">
                    <div v-if="objDetail.price === null || objDetail.price === ''" >
                        面议
                    </div>
                    <div v-else>
                        <span v-if="objDetail.price<10000">¥</span>{{objDetail.price}} {{objDetail.unitName}}
                    </div>
                </div>
                <div class="money" v-else>
                    <div v-if="objDetail.freight === null || objDetail.freight === ''" >
                        面议
                    </div>
                    <div v-else>
                        <span v-if="objDetail.freight<10000">¥</span>{{objDetail.freight}} {{objDetail.freightUnitName}}
                    </div>
                </div>
                <div class="label flex-x-s flex-wrap">
                    <div v-for="(item,index) in objDetail.tags" :key="index" @click="goTagDetail(item)">{{item.name}}</div>
                </div>
                <div class="line"></div>
                <div class="ccwl-cc-detail">
                    <!-- 仓储 -->
                    <div v-if="type == 1">
                        <div class="f1 flex-x-s">
                            <div>
                                <span>仓库类型</span>
                                <span>{{objDetail.storageTypeName}}</span>
                            </div>
                            <div>
                                <span>面积</span>
                                <span>{{objDetail.area}}m²</span>
                            </div>
                        </div>
                        <div class="f2">
                            <span>所在地</span>
                            <span>{{objDetail.addressName}}</span>
                        </div>
                    </div>
                    <!-- 车找货 -->
                    <div v-if="type == 0 && status == 1">
                        <div class="f1 flex-x-s">
                            <!-- <div>
                                <span>最大载重</span>
                                <span>{{objDetail.weight}}吨</span>
                            </div> -->
                            <div>
                                <span>发布时间</span>
                                <span>{{objDetail.publishTime | handleTimePlus('//')}}</span>
                            </div>
                        </div>
                    </div>
                    <!-- 货找车 -->
                    <div v-if="type == 0 && status == 0">
                        <!-- <div class="f1 flex-x-s">
                            <div>
                                <span>货物类型</span>
                                <span>{{objDetail.goodsTypeName}}</span>
                            </div>
                            <div>
                                <span>货物重量</span>
                                <span>{{objDetail.weight}} {{objDetail.weightUnit}}</span>
                            </div>
                        </div> -->
                        <div class="f2 f1">
                            <span>发布时间</span>
                            <span>{{objDetail.publishTime | handleTimePlus('//')}}</span>
                        </div>
                    </div>
                </div>
                <div class="line" v-if="type == 0"></div>
                <div v-if="type ==0">
                    <div class="ccwl-ys-detail iphonex-padding-bottom">
                        <div class="title">运输详情</div>
                        <div class="content">
                            <span>出发地</span>
                            <span>{{objDetail.departureAddressName}}{{objDetail.departureAddress}}</span>
                        </div>
                        <div class="content">
                            <span>目的地</span>
                            <span>{{objDetail.destinationAddressName}}{{objDetail.destinationAddress}}</span>
                        </div>
                        <div class="content">
                            <span>预估距离</span>
                            <span>{{objDetail.distance | filterDistance}}</span>
                        </div>
                    </div>

                </div>
                <div class="line" v-if="type == 0"></div>
                <div class="ccwl-hw-detail" v-if="type == 0">
                    <div class="hwt">货物说明</div>
                    <pre class="hwc">{{objDetail.intro}}</pre>
                </div>
            </div>
        </div>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/swiper.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/vue-lazyload.js"></script>
    <script>
        apiready = function () {
            imgLazyLoad();
            var photoBrowser = api.require('photoBrowser');
            var vm = new Vue({
                el: '.app',
                data: {
                    objDetail: {},
                    id: api.pageParam.id,
                    type: api.pageParam.type,
                    status: api.pageParam.status,
                },
                created() {


                },
                mounted() {
                    this.type = api.pageParam.type
                    this.initDetail();
                },
                filters: {
                    handleTimePlus,
                    filterDistance(val) {
                        val = val / 1000
                        if (val > 500) {
                            return '500km以上'
                        } else {
                            return val.toFixed(1) + 'km'
                        }
                    }
                },
                methods: {
                    preview(index,medias){
                        previewPhoto(index,medias,photoBrowser)
                    },
                    goTagDetail(item){
                        api.openWin({
                            name: 'tag_win',
                            url: '../common/tag_win.html',
                            bounces: false,
                            pageParam: {item : item}
                        });
                    },
                    initSwipe() {
                        this.$nextTick(()=>{
                            new Swiper('.swiper-container', {
                                pagination: '.swiper-pagination',
                                // autoplay: 3000,
                                onTouchStart: function (swiper, even) {
                                    api.setFrameAttr({
                                        name: 'goods_detail_frm',
                                        bounces: false
                                    });
                                },
                                onTouchEnd: function (swiper) {
                                    api.setFrameAttr({
                                        name: 'goods_detail_frm',
                                        bounces: true
                                    });
                                },
                                onSliderMove: function(swiper, event){
                                    var curDom = document.querySelector('#player' + swiper.activeIndex)
                                    if(curDom) curDom.pause()
                                },
                            })
                        })
                    },
                    initDetail() {
                        let vm = this
                        var method = "getLogisticsDetail";
                        if (this.type == 1)
                            method = "getStoreHouseDetail"
                        index.logistically(method)({
                            id: api.pageParam.id
                        }, function (ret) {
                            console.log(JSON.stringify(ret));
                            vm.objDetail = ret.data;
                            vm.objDetail.banners.map(item => {
                                if (item.videoId) {
                                    common("getVideoPlay")(item.videoId, function (ret) {
                                        var videoId = ret.data.videoBase.videoId
                                        var index = vm.objDetail.banners.findIndex(target => {
                                            return target.videoId == videoId
                                        })
                                        vm.$set(vm.objDetail.banners[index],'playURL', ret.data.playInfoList[0].playURL)
                                    })
                                }
                            })
                            vm.initSwipe();
                        })
                    },
                    backPage() {
                        api.closeWin();
                    },
                    call() {
                        var phone = this.objDetail.phone.split(',')
                        api.actionSheet({
                            cancelTitle: '取消',
                            buttons: phone
                        }, function (ret, err) {
                            if (ret.buttonIndex > phone.length) return false;
                            api.call({
                                type: 'call_type',
                                number: phone[ret.buttonIndex - 1]
                            });
                        });
                    },
                },
            })
            api.addEventListener({
                name: 'sendLogistics'
            }, function (ret, err) {
                var type = ret.value.type
                if (type == 'call') {
                    if (!checkToken()) return false;
                    vm.call()
                } else if (type == 'goIM') {
                    gIMCommon(vm.objDetail.userId)
                }
            });
        }
    </script>
</body>

</html>
